<template>
    <div style="height: 100%">
        <!-- 统计面板 -->
        <el-row class="top_number">
            <el-col :span="6">
                <el-statistic title="总添加设备数量" :value="10000"/>
            </el-col>
            <el-col :span="6">
                <el-statistic title="在线设备数量" :value="6000"/>
            </el-col>
            <el-col :span="6">
                <el-statistic title="第三方应用接入数" :value="outputValue"/>
            </el-col>
            <el-col :span="6">
                <el-statistic title="MQTT消息总数量" :value="56000">
                    <template #suffix>
                        <el-icon style="vertical-align: -0.125em">
                            <ChatLineRound/>
                        </el-icon>
                    </template>
                </el-statistic>
            </el-col>
        </el-row>
        <!-- 图表 -->
        <el-row style="height: 55%">
            <el-col :span="12" class="middle_charts">
                <div id="device_count"></div>
            </el-col>
            <el-col :span="12" class="middle_charts">
                <div id="device_line"></div>
            </el-col>
        </el-row>
        <!-- 底部数据 -->
        <el-row style="height: 32%;">
            <el-col :span="24" class="bottom_info">
                <el-descriptions title="&nbsp;&nbsp;&nbsp;EMQX Broker Status" :column="2" border>
                    <el-descriptions-item
                            label="节点名称"
                            label-align="left"
                            align="center"
                            label-class-name="my-label"
                            class-name="my-content"
                            width="150px"
                    >emqx@172.17.0.5
                    </el-descriptions-item>
                    <el-descriptions-item label="运行时长" label-align="left" align="center"
                    >77天14小时30分
                    </el-descriptions-item>
                    <el-descriptions-item label="Place" label-align="left" align="center"
                    >成都
                    </el-descriptions-item>
                    <el-descriptions-item label="Remarks" label-align="left" align="center">
                        <el-tag size="small">StandAlone</el-tag>
                    </el-descriptions-item>
                    <el-descriptions-item label="Address" label-align="left" align="center"
                    >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts" setup>
    import {ref, onMounted} from 'vue'
    import {useTransition} from '@vueuse/core'
    import {ChatLineRound} from '@element-plus/icons-vue'
    import * as echarts from 'echarts'

    /* 统计面板 */
    const source = ref(0)
    const outputValue = useTransition(source, {
        duration: 1500,
    })
    source.value = 500

    onMounted(
        () => {
            /* 柱状图 */
            initDeviceCount()
            /* 折线图 */
            initDeviceLine()
        }
    )

    function initDeviceCount() {
        // 基于准备好的dom，初始化echarts实例
        const myChart = echarts.init(document.getElementById('device_count'));
        // 指定图表的配置项和数据
        const option = {
            title: {
                text: 'IoT Cloud Device Count'
            },
            tooltip: {},
            legend: {
                data: ['接入数量']
            },
            xAxis: {
                data: ['雷达', '智能开关', '智能插座', '睡眠监测', '睡眠监测', '手环']
            },
            yAxis: {},
            series: [
                {
                    name: '接入数',
                    type: 'bar',
                    data: [5, 20, 36, 10, 10, 20]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function initDeviceLine() {
        const chartDom = document.getElementById('device_line');
        const myChart = echarts.init(chartDom);
        let option;

        option = {
            title: {
                text: 'IoT Cloud Increment Count'
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [150, 230, 224, 218, 135, 147, 260],
                    type: 'line'
                }
            ]
        };
        option && myChart.setOption(option);
    }


</script>

<style scoped>
    .el-col {
        text-align: center;
    }

    :deep(.my-label) {
        background: var(--el-color-success-light-9) !important;
    }

    :deep(.my-content) {
        background: var(--el-color-danger-light-9);
    }


    .top_number {
        height: 13%;
        padding-top: 1%;
    }

    .middle_charts {
        box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 1%;

        div {
            width: 100%;
            height: 100%;
        }
    }

    .bottom_info {
        margin-top: 1%;
    }

</style>